import React, { Component } from 'react';
import { InputItem, Button } from 'antd-mobile';
import { inject, observer } from 'mobx-react';
import { RouterStore } from 'mobx-react-router';
import ComponentStore from '../../stores/ComponentStore';
import VerifyCode from '../../component/verify_code/verifyCode';
import './Reset.scss';

interface ResetProps {
  componentStore: ComponentStore;
  routingStore: RouterStore;
}
// 找回密码
@inject('componentStore', 'routingStore')
@observer
export default class Reset extends Component<ResetProps> {
  render(): JSX.Element {
    const { routingStore, componentStore } = this.props;
    return (
      <section className="reset-container">
        <div className="title">{componentStore.resetTitle}</div>
        <div className="sub-title">验证码将会发送至你的手机</div>

        <div className="input-wrapper">
          <InputItem
            type="phone"
            className="transparent-input"
            extra={<VerifyCode className="send-button" />}
            placeholder="手机号"
          />
          <InputItem className="transparent-input" placeholder="验证码" />
          <InputItem type="password" className="transparent-input" placeholder="输入新密码" />
          <InputItem type="password" className="transparent-input" placeholder="再次输入新密码" />
        </div>

        <Button activeStyle={false} className="confirm-reset-btn">确定</Button>
        <div className="btn-wrapper">
          <span className="page-btn" onClick={() => routingStore.goBack()}>返回登录页</span>
        </div>
      </section>
    );
  }
}